<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例联习</title>
	</head>
	<body>
		<div id="app">
		<!-- 	{{msg}} -->
			<div align="center">
				<h3>用户新增</h3>
				姓名:<input type="text" v-model="addUser.name"/>
				年龄:<input type="text" v-model="addUser.age"/>
				性别:<input type="text" v-model="addUser.sex"/>
				<button @click="addUserBtn()">新增</button>
			</div>
			
		<table border="1px" width="80%" align="center">
			<tr align="center">
				<th colspan="5"><h3>用户列表</h3></th>
			</tr>
			<tr align="center" >
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			<tr align="center" v-for="user in userList">
				<th v-text="user.id"></th>
				<th v-text="user.name"></th>
				<th v-text="user.age"></th>
				<th v-text="user.sex"></th>
				<th width="20%">
					<button @click="updateUserBt(user)">修改</button>
					<button @click="deleteUser(user)">删除</button>
				</th>
			</tr>
		</table>
		<div align="center">
			<h3>用户修改</h3>
			编号:<input type="text" v-model="updateUser.id" disabled/>
			姓名:<input type="text" v-model="updateUser.name"/><br>
			年龄:<input type="text" v-model="updateUser.age"/>
			性别:<input type="text" v-model="updateUser.sex"/><br>
			<button @click="updateUserBtn">提交修改</button>
		</div>
		</div>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
		axios.defaults.baseURL = "http://localhost:8090/vue"
			const app=new Vue({
			el:"#app",
			data:{
				userList:[],
				addUser:{
					id:"",
					name:"",
					age:"",
					sex:""
				},
				updateUser:{
					id:"",
					name:"",
					age:"",
					sex:""
				}
			},
			methods:{
				getUserList(){
					axios.get("/findAll")
					.then(promise=>{
						this.userList=promise.data
						// console.log(promise.data)
					})
					},
					addUserBtn(){
						axios.post("saveUser",this.addUser)
						.then(promise=>
						{
							let msg=promise.data
							alert(msg)
							this.getUserList()
							this.addUser={}
						})
					},
					deleteUser(user){
						axios.delete("/deleteUserById?id="+user.id)
						.then(promise=>{
							alert(promise.data)
							this.getUserList()
						})
					},
					updateUserBt(user){
						this.updateUser=user
					},
					updateUserBtn(){
						axios.put("/updateUser",this.updateUser)
						.then(promise=>{
							alert(promise.data)
							this.getUserList()
							this.updateUser={}
						})
					}
				},
				created(){
					// alert("生命周期函数")
					this.getUserList()
				}
			})
		</script>
	</body>
</html>

